import React, { Component } from 'react';
import { NavBar, Carousel, Flex } from 'antd-mobile';
import { withRouter } from "react-router-dom";
import SearchInput from "../searchInput/SearchInput"
import "./Index.css";
import myaxios from "../../utils/myaxios";
import axios from "axios";
class Index extends Component {
    constructor(props) {
        super(props);
        const CancelToken = axios.CancelToken;//频繁切换，取消请求
        this.source = CancelToken.source();
    }
    state = {
        swiper_list: [],
        imgHeight: 170,
        catitems: [],
        productData: [],
        showSwiper: false
    }
    componentDidMount() {
        //获取轮播图
        myaxios.get("home/swiperdata", {
            cancelToken: this.source.token
        }).then((res) => {
            this.setState({
                swiper_list: res,
                showSwiper: true
            })
        }).catch((err) => {
            console.log(err)
        })
        //获取分类导航图片
        myaxios.get("home/catitems", {
            cancelToken: this.source.token
        }).then((res) => {
            this.setState({
                catitems: res
            })
        }).catch((err) => {
            console.log(err)
        })
        //获取图片列表
        myaxios.get("home/floordata", {
            cancelToken: this.source.token
        }).then((res) => {
            this.setState({
                productData: res
            })
            console.log(res);
        }).catch((err) => {
            console.log(err)
        })
    }
    componentWillUnmount() {
        this.source.cancel("取消首页的请求")
    }
    handleSwiperClick = (id) => {
        this.props.history.push("/goodDetail/" + id)
    }
    handleCatItemClick = () => {
        this.props.history.push("/goodList/query=123")
    }
    handleImgClick = (params) => {
        this.props.history.push("/goodList/query=123")

    }

    render() {
        return (
            <div className="yg-index">
                {/* 首页导航条的开始 */}
                <div className="yg-index-nav">
                    <NavBar className="index-nav">优购商城</NavBar>
                </div>
                {/* 首页导航条的结束 */}
                {/* 首页搜索框的开始 */}
                <div className="yg-index-search">
                    <SearchInput></SearchInput>
                </div>
                {/* 首页搜索框的结束 */}
                {/* 首页轮播图的开始 */}
                <div className="yg-index-swiper">
                    {this.state.showSwiper && (<Carousel autoplay={true} infinite>
                        {this.state.swiper_list.map(val => (
                            <div
                                key={val.goods_id}
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                                onClick={this.handleSwiperClick.bind(this, val.goods_id)}
                            >
                                <img
                                    src={val.image_src}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>)}
                </div>
                {/* 首页轮播图的结束 */}
                {/* 首页分类导航的开始 */}
                <div className="yg-index-catitems">
                    <div className="catitems-item">
                        <Flex>
                            {this.state.catitems.map((val) => {
                                return <Flex.Item key={val.image_src} onClick={this.handleCatItemClick}>
                                    <img src={val.image_src} alt={val.name} />
                                </Flex.Item>
                            }
                            )}

                        </Flex>
                    </div>
                </div>
                {/* 首页分类导航的结束 */}
                {/* 首页图片列表的开始 */}
                <div className="yg-index-productData">
                    {this.state.productData.map((val) => {
                        return <div className="productData-item" key={val.floor_title.image_src}>
                            {/* 标题开始 */}
                            <div className="product-title">
                                <img src={val.floor_title.image_src} alt="" />
                            </div>
                            {/* 标题结束 */}
                            {/* 图片列表的开始 */}
                            <div className="product-image-list">
                                {val.product_list.map((vv) => {
                                    return <div className="image-list-item" key={vv.image_src} onClick={this.handleImgClick}>
                                        <img src={vv.image_src} alt="" />
                                    </div>
                                }
                                )}
                            </div>
                            {/* 图片列表的结束 */}
                        </div>
                    }
                    )}
                </div>
                {/* 首页图片列表的结束 */}

            </div>
        )
    }
}
export default withRouter(Index)